<template>
  <a-modal :width="640" :visible="visible" title="支付测试" @ok="handleSubmit" @cancel="visible = false">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="支付案列"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select placeholder="请选择支付案列" v-decorator="['productName', {rules:[{required: true, message: '请选择支付案列'}]}]">
          <a-select-option value="地铁卡充值">地铁卡充值</a-select-option>
          <a-select-option value="Q币充值">Q币充值</a-select-option>
          <a-select-option value="水电气缴费">水电气缴费</a-select-option>
          <a-select-option value="disabled" disabled>更多敬请期待...</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="充值金额"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-checkbox-group>
          <a-radio-group :options="options" @change="onChange" v-decorator="['payFee', {rules:[{required: true,message: '选择充值金额'}]}]" />
        </a-checkbox-group>
      </a-form-item>
      <a-form-item
        label="支付类型"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select placeholder="支付方式" v-decorator="['payType', {rules:[{required: true, message: '选择支付方式'}]}]">
          <a-select-option value="wx">微信</a-select-option>
          <a-select-option value="ali">支付宝</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="商品描述"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-textarea :rows="5" v-decorator="['description',{rules:[{required: true, message: '商品描述'}]}]"></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'PayForm',
  data () {
    return {
       model:{},
       options :[
        { label: '0.01元', value: '0.01' },
        { label: '0.1元', value: '0.1' },
        { label: '1元', value: '1' },
        { label: '10元', value: '10' },

      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },

      visible: false,
      form: this.$form.createForm(this)
    }
  },
  created(){

  },
  methods: {

    add () {
      this.visible = true
    },
    edit (record) {
      const { form: { setFieldsValue } } = this
      this.visible = true
      this.$nextTick(() => {
        setFieldsValue({ taskName: 'test' })
      })
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.visible = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          let formData = Object.assign(this.model, values);
          console.log(formData)
        }

      })
    },
    onChange(e) {
      console.log('radio2 checked', e.target.value);
    },
  }
}
</script>
